<!--
 * @Author: delin66
 * @Date: 2025-01-02 15:54:06
 * @LastEditors: delin66
 * @LastEditTime: 2025-01-10 14:13:00
 * @Descripttion: 
-->
<template>
  <div class="container">
      <el-menu class="nav"
        :default-active="activeIndex"
        mode="vertical"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b"
        router
      >
        <template v-for="(item, index) in navList">
          <el-menu-item :index="item.path">{{ item.title }}</el-menu-item>
        </template>
      </el-menu>

    <router-view></router-view>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, watch, computed } from 'vue';
import { useRoute ,useRouter} from 'vue-router';

const route = useRoute();
const router = useRouter();
const activeIndex = ref<string>('/enter-park');

const navList = ref([
  { title: '地方政策法规', path: '/policy-regulation/local-policy' },
  { title: '国家政策法规', path: '/policy-regulation/country-policy' },
  { title: '知识产权', path: '/policy-regulation/intellectual-property' },
  
]);

const handleSelect = (key: string, keyPath: string[]) => {
  router.push(key);
};

// 控制nav是否显示

const curPath = computed(() => {
  return route.path;
});
watch(
  curPath,
  () => {
    // 正确显示当前显示的nav
    activeIndex.value = route.path;
  },
  {
    immediate: true,
  }
);
</script>

<style scoped lang="scss">
.container {
  width: 100%;
  display: flex;
}

.nav {
  background-color: #545c64;
  .el-menu-item.is-active {
    border-left: 4px solid #ffd04b;
  }
}
</style>
